<template>
  <div class="ma-content-block p-4">
    <ma-crud :options="crud" :columns="columns" ref="crudRef"  @selection-change="selectChange">
      <template #tableAfterButtons>
        <a-button
            @click="batchAudit"
            type="outline"
            status="success"
        ><template #icon><IconExperiment /></template>批量审核</a-button>
      </template>



      <template #operationBeforeExtend="{ record }">
        <a-link @click="audit(record)" v-if="record.status == 1"><icon-arrow-up /> 审核</a-link>
        <a-link @click="openDetail(record)"><icon-eye /> 查看</a-link>
      </template>
    </ma-crud>

    <a-modal :visible="showVisible" title="表单信息" @cancel="showVisible=false" draggable width="60%" :footer="false">
      <div class="">
        <div v-for="(item,index) in currentRecord.form_data">
          <div class="mb-2">
            <span class="mr-2 font-bold">{{item.name}}:</span>
            <span v-if="item.type=='5'">
             <a-image :src="item.value ? $tool.showFile(item.value):''" height="80" />
          </span>
            <span v-else>{{item.value}}</span>
          </div>
        </div>
      </div>
    </a-modal>


    <a-modal
        v-model:visible="visible"
        @ok="doApplyAudit"
        @cancel="approveClose"
        okText="审核" cancelText="关闭"
        unmountOnClose
        draggable
    >
      <template #title>
        {{ curRecord?.name || '批量审核'}}
      </template>
      <div>
        <div v-if="curRecord?.id">
          <div class="">
            <div v-for="(item,index) in currentRecord.form_data">
              <div class="mb-2">
                <span class="mr-2 font-bold">{{item.name}}:</span>
                <span v-if="item.type=='5'">
                   <a-image :src="item.value ? $tool.showFile(item.value):''" height="80" />
                </span>
                <span v-else>{{item.value}}</span>
              </div>
            </div>
          </div>
        </div>

        <a-form :model="approveForm">
          <a-form-item field="remark" label="审核备注">
            <a-input v-model="approveForm.remark" placeholder="拒绝时请填写拒绝原因"/>
          </a-form-item>
          <a-form-item field="status" label="审核结果">
            <a-radio-group v-model="approveForm.status" :options="[{ label: '通过', value: 2 },{ label: '拒绝', value: 3 }]" />
          </a-form-item>
        </a-form>


      </div>
    </a-modal>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'

import api from '@/api/prm/activity_form_submit.js'
import { Message } from '@arco-design/web-vue'

//选中项
const selecteds = ref([])
//设置选中项
const selectChange = (val) => selecteds.value = val

const showVisible = ref(false);

const currentRecord = ref({})
const openDetail = (record) => {
  // if(record.form_data){
  //   record.form_data_arr = JSON.parse(record.form_data)
  // }
  currentRecord.value = record
  console.log(currentRecord.value);
  showVisible.value = true
}

//审核弹窗
const visible = ref(false);
//审核表单
const approveForm = ref({applyId:0,remark:'',status:2});

const curRecord = ref({})
const audit = async (record) => {
  // console.log(record);
  // if(record.form_data && !record.form_data_arr){
  //   record.form_data_arr = JSON.parse(record.form_data)
  // }
  approveForm.value.applyId = record.id
  curRecord.value = record
  visible.value = true;
}
const batchAudit = async () => {
  console.log(selecteds.value);

  if (selecteds.value.length === 0) {
    Message.error('至少要选择一条数据')
    return
  }

  approveForm.value.applyId = selecteds.value
  visible.value = true;
}

const approveClose = () => {
  visible.value = false;
  curRecord.value = {}
}
//执行审核
const doApplyAudit = async () => {

  let response
  response = await api.applyAudit(approveForm.value)

  response.success && Message.success(response.message)

  crudRef.value.refresh()
}
//表格
const crud = reactive({
  api: api.list,
  showIndex: false,
  // pageLayout: 'fixed',
  showTools:false,
  // tablePagination:true,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 180,
  searchColNumber:4,
  add: {show: false},
  edit: {show: false},
  delete: {show: false,},
  formOption: {viewType: 'modal'},
  export: {
    show: true,
    url: 'prm/activity/form_submit/export',
    auth: ['prm:form_submit:export']
  }
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: false},
  {
    title: '活动名称', dataIndex: 'act_id', search: true, width: 80, addDisplay: false, editDisplay: false,
    formType: 'select', dict: { url: 'prm/activity/allList', props: { label: 'name', value: 'id' }, translation: true,pageSize:50,openPage:false },
  },
  {
    title: '会员信息', dataIndex: 'nickname', formType: 'input', addDisplay: false, editDisplay: false, search: false, width: 180,
  },
  {
    title: '关键词', dataIndex: 'keyword', formType: 'input', width: 80, search: true
  },
  {
    title: '表单信息', dataIndex: 'form_data', formType: 'input', width: 200, search: true
  },
  {
    title: '状态', dataIndex: 'status', search: true, formType: 'radio', addDisplay: false, editDisplay: false,width:80,
    dict: {data: [{key: 1, title: '待审核'}, {key: 2, title: '通过'}, {key: 3, title: '拒绝'}], props: {label: 'title', value: 'key'}, translation: true},
  },
  {
    title: '提交时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: true, formType: 'range', width: 180
  }])

</script>

<script>
export default {name: 'prm:activity_submit'}
</script>

<style scoped>

</style>
